<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随手工具箱 - 图床工具</title>
    <style>
        :root { --primary: #4361ee; }
        body { 
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif; 
            max-width: 800px; 
            margin: 0 auto; 
            padding: 2rem; 
            display: flex;
            flex-direction: column;
            min-height: 90vh;
        }
        .header {
            display: flex;
            align-items: center;
            margin-bottom: 1rem;
        }
        .back-btn {
            text-decoration: none;
            color: var(--primary);
            display: flex;
            align-items: center;
            margin-right: 1rem;
            font-size: 1.2rem;
        }
        .content {
            flex: 1;
        }
        .upload-area { 
            border: 2px dashed var(--primary); 
            border-radius: 8px;
            padding: 3rem; 
            text-align: center; 
            margin: 2rem 0;
            transition: all 0.3s;
        }
        .upload-area:hover { background: #f8f9fa; }
        #fileInput { display: none; }
        .upload-btn {
            background: var(--primary);
            color: white;
            padding: 0.8rem 1.5rem;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 1rem;
        }
        #preview { max-width: 100%; margin-top: 1rem; }
        #result { 
            background: #f8f9fa;
            padding: 1rem;
            border-radius: 4px;
            margin-top: 1rem;
            word-break: break-all;
        }
        .url-box {
            display: flex;
            margin-top: 1rem;
        }
        .url-box input {
            flex: 1;
            padding: 0.5rem;
            border: 1px solid #ddd;
            border-radius: 4px 0 0 4px;
        }
        .url-box button {
            padding: 0.5rem 1rem;
            background: var(--primary);
            color: white;
            border: none;
            border-radius: 0 4px 4px 0;
            cursor: pointer;
        }
        .loading {
            display: none;
            margin: 1rem auto;
            border: 4px solid #f3f3f3;
            border-top: 4px solid var(--primary);
            border-radius: 50%;
            width: 30px;
            height: 30px;
            animation: spin 2s linear infinite;
        }
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        .footer {
            margin-top: 2rem;
            font-size: 12px;
            color: #666;
            padding: 10px;
            text-align: center;
        }
        .footer a {
            color: #666;
            text-decoration: none;
        }
    </style>
</head>
<body>
    <div class="header">
        <a href="/" class="back-btn">← 返回</a>
        <h1>图床工具</h1>
    </div>
    <p>上传图片获取可直接引用的HTTPS链接</p>
    
    <div class="content">
        <div class="upload-area" id="dropArea">
            <input type="file" id="fileInput" accept="image/*">
            <p>点击或拖拽图片到此处上传</p>
            <button class="upload-btn" onclick="document.getElementById('fileInput').click()">选择图片</button>
            <div id="preview"></div>
            <div class="loading" id="loadingSpinner"></div>
        </div>

        <div id="result"></div>
    </div>

    <div class="footer">
        服务备案号：<a href="https://beian.miit.gov.cn" target="_blank">津ICP备2025033698号-1</a>
    </div>

    <script>
        // 拖拽上传功能
        const dropArea = document.getElementById('dropArea');
        const fileInput = document.getElementById('fileInput');
        const loadingSpinner = document.getElementById('loadingSpinner');

        dropArea.addEventListener('dragover', (e) => {
            e.preventDefault();
            dropArea.style.background = '#f1f3f5';
        });
        
        dropArea.addEventListener('dragleave', () => {
            dropArea.style.background = '';
        });
        
        dropArea.addEventListener('drop', (e) => {
            e.preventDefault();
            dropArea.style.background = '';
            if(e.dataTransfer.files.length) {
                fileInput.files = e.dataTransfer.files;
                handleFileSelection();
            }
        });

        fileInput.addEventListener('change', handleFileSelection);

        function handleFileSelection() {
            const file = fileInput.files[0];
            if (!file) return;

            // 显示预览
            showPreview(file);
            
            // 上传文件
            uploadFile(file);
        }

        function showPreview(file) {
            const preview = document.getElementById('preview');
            preview.innerHTML = `<img src="${URL.createObjectURL(file)}" alt="预览" style="max-height: 200px;">`;
        }

        function uploadFile(file) {
            // 显示加载动画
            loadingSpinner.style.display = 'block';
            
            const formData = new FormData();
            formData.append('file', file);

            fetch('/upload', {
                method: 'POST',
                body: formData
            })
            .then(response => {
                if (!response.ok) {
                    return response.json().then(err => { throw new Error(err.detail || '上传失败'); });
                }
                return response.json();
            })
            .then(data => {
                // 隐藏加载动画
                loadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <h3>✓ 上传成功</h3>
                    <p>文件名: ${data.filename}</p>
                    <p>大小: ${(data.size/1024).toFixed(2)} KB</p>
                    <div class="url-box">
                        <input type="text" id="urlInput" value="${data.url}" readonly>
                        <button onclick="copyUrl()">复制</button>
                    </div>
                    <div style="margin-top: 1rem;">
                        <img src="${data.url}" style="max-height: 150px; border: 1px solid #ddd;">
                    </div>
                `;
            })
            .catch(error => {
                // 隐藏加载动画
                loadingSpinner.style.display = 'none';
                
                const resultDiv = document.getElementById('result');
                resultDiv.innerHTML = `
                    <div style="color: red; padding: 1rem; background: #fff5f5; border-radius: 4px;">
                        <h3>✗ 上传失败</h3>
                        <p>${error.message}</p>
                    </div>
                `;
            });
        }

        function copyUrl() {
            const urlInput = document.getElementById('urlInput');
            urlInput.select();
            document.execCommand('copy');
            
            // 创建非阻塞式通知
            const notification = document.createElement("div");
            notification.style.position = "fixed";
            notification.style.bottom = "50px";
            notification.style.left = "50%";
            notification.style.transform = "translateX(-50%)";
            notification.style.padding = "10px 20px";
            notification.style.backgroundColor = "#4361ee";
            notification.style.color = "white";
            notification.style.borderRadius = "4px";
            notification.style.zIndex = "1000";
            notification.textContent = "链接已复制！";
            document.body.appendChild(notification);
            
            // 通知自动消失
            setTimeout(() => {
                notification.style.opacity = "0";
                notification.style.transition = "opacity 0.5s";
                setTimeout(() => {
                    document.body.removeChild(notification);
                }, 500);
            }, 2000);
        }
    </script>
</body>
</html>
